<form class="form-horizontal" method="post" enctype="multipart/form-data">

  <legend>#= label.tree #</legend>
    
    
    <div class="control-group">
      <label class="control-label" for="treespecie">#= label.treespecie # :</label>
      <div class="controls">
        <select id="treespecie" class="k-form-large" data-role="combobox" data-text-field="latinname" data-value-field="id" data-bind="source: treespecies, value: treespecieValue" data-filter="contains" data-placeholder="Boomsoort" data-index="-1"></select>
        &nbsp;
        <i id="treespecieInfo" class="icon-question-sign" data-bind="events:{ mouseover: showTooltip }" data-placement="right" data-original-title="#= label.treespecieInfo #"></i>
      </div>
    </div>
    
    
    <div class="control-group">
      <label class="control-label" for="number">#= label.number # :</label>
      <div class="controls">
        <input id="number" class="" data-role="numerictextbox" data-bind="value: numberValue" data-min="1" data-format="i" />
      </div>
    </div>
    
    
    <div class="control-group">
      <label class="control-label" for="location">#= label.location # :</label>
      <div class="controls">
        <div>
          <p>
            <input type="text" id="locationManual" placeholder="Geef locatie in" class="k-textbox k-form-large" data-bind="value: locationManualText, events:{ blur: locationManualListener }">
            <button class="k-button" data-bind="events:{ click: useManualLocation }"><i class="icon-screenshot"></i></button>
          </p>
          
          <div data-bind="events:{ click: toggleExtendedPosition }" style="width: 22.4em; cursor: pointer;">
            <hr/>
            <div style="margin-top: -28px; margin-left: 70px; padding-left: 10px; font-style: italic; background-color: white; width: 130px;">Overige invoervelden</div>
          </div>
          
          <div id="extendedPosition" style="display: none;">
          
            <p>
              <i>gebruik huidige locatie :</i><br/>
              
              <table>
                <tr>
                  <td class="width-large"><span style="display: inline;" data-bind="text: locationCurrentText"></span></td>
                  <td><button class="k-button" data-bind="events: { click: useCurrentLocation }"><i class="icon-screenshot"></i></button></td>
                </tr>
              </table>
              
            </p>
            <p>
              <i>of gebruik locatiegegevens foto :</i><br/>
              <!-- <input type="text" id="locationPhoto" placeholder="Huidige locatie" class="k-textbox k-form-large" data-bind="value: locationPhoto" /> -->
              <!-- <button class="k-button" data-bind="click: usePhotoLocation"><i class="icon-screenshot"></i></button> -->
              <span id="photoData" />
              <input name="photos[]" id="photos" type="file" data-role="upload" data-multiple="true" data-localization='{"select": "#= label.photo_add #"}' data-async='{"saveUrl": "/vta/file/imageupload.json", "removeUrl": "/vta/file/remove", "autoUpload": true }' data-bind="events:{ upload: imageUpload, success: imageUploadSuccess }" />
            </p>
            
          </div><!-- sluiten extendedPosition -->
            
        </div>
        <div style="clear: both;">
          <div class="arrow_box" style="position: absolute; top: 217px; margin-left: 400px;">
            <div id="map-canvas" class="map-normal" style="margin: 5px;"></div>
          </div>
        </div>
      </div>
    </div>
    
    
    <div class="control-group">
      <label class="control-label" for="soil">#= label.soil # :</label>
      <div class="controls">
        <select id="soil" data-role="dropdownlist" data-text-field="name" data-value-field="id" data-bind="source: soils, value: soilValue" data-option-label='{ "name": "Bodemsoort", "id": "0" }'></select>
      </div>
    </div>
    
    
    <div class="control-group">
      <label class="control-label" for="plantDate">#= label.plantdate # :</label>
      <div class="controls">
        <input id="plantDate" data-role="datepicker" data-bind="value: plantDateValue" data-format="dd-MM-yyyy" />
      </div>
    </div>
    
    
    <div class="control-group">
      <label class="control-label" for="height">#= label.height # :</label>
      <div class="controls">
        <input id="height" data-role="slider" data-bind="value: heightValue" data-min="0" data-max="50" data-value="20" data-orientation="vertical" data-tick-placement="none" data-tooltip='{ "format": "{0} meter" }' data-decrease-button-title="kleiner" data-increase-button-title="groter" />
        <div style="margin-top: -180px; margin-left: 50px;">
            <span data-bind="text: heightValue"></span> meter 
            <img src="/img/tree_silhouette.png" height="170" width="100" />
        </div>
      </div>
    </div>
    
    
    <div class="control-group">
      <label class="control-label" for="stemDiameter">#= label.diameter # :</label>
      <div class="controls">
        <span data-bind="text: diameterValue" style="margin-left: 100px;"></span> centimeter<br/>
        <!-- <input type="text" id="stemDiameter" placeholder="Stam diameter" style="margin-left: 30px;"> -->
        <input id="stemDiameter" data-role="slider" data-bind="value: diameterValue" data-min="0" data-max="200" data-value="50" data-orientation="horizontal" data-tick-placement="none" data-tooltip='{ "format": "{0} centimeter" }' data-decrease-button-title="kleiner" data-increase-button-title="groter" style="margin-left: 40px;" />
        
      </div>
    </div>
    
    
    
    <div data-bind="events:{ click: toggleExtendedControls }" style="width: 550px; cursor: pointer;">
      <hr/>
      <div style="margin-top: -28px; margin-left: 100px; padding-left: 20px; font-style: italic; background-color: white; width: 160px;">Overige invoervelden</div>
    </div>
    
    
    <div id="extendedControls" style="display: none;">
    
      <div class="control-group">
        <label class="control-label" for="iconic">#= label.iconic # :</label>
        <div class="controls">
          <input id="iconic" type="checkbox" data-bind="checked: iconicValue" />
        </div>
      </div>
    
    
      <div class="control-group">
        <label class="control-label" for="multitrunk">#= label.multitrunk # :</label>
        <div class="controls">
          <input id="multitrunk" type="checkbox" data-bind="checked: multitrunkValue" />
        </div>
      </div>
    
      
      <div class="control-group">
        <label class="control-label" for="valuable">#= label.valuable # :</label>
        <div class="controls">
          <input id="valuable" type="checkbox" data-bind="checked: valuableValue" />
        </div>
      </div>


      <div class="control-group">
        <label class="control-label" for="location">#= label.remark # :</label>
        <div class="controls">
          <textarea class="k-textbox k-form-large" id="remark" data-bind="value: remark"></textarea>
        </div>
      </div>
      
    
    </div><!-- sluiten extendedControls -->
    
</form>